<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Dynatree - Example</title>

	<script src='../jquery/jquery.js' type='text/javascript'></script>
	<script src='../jquery/ui.core.js' type='text/javascript'></script>
    <script src='../jquery/jquery.cookie.js' type='text/javascript'></script>

	<link href='../src/skin/ui.dynatree.css' rel='stylesheet' type='text/css'>
	<script src='../src/jquery.dynatree.js' type='text/javascript'></script>

	<link href='sample.css' rel='stylesheet' type='text/css'>
    <script src='sample.js' type='text/javascript'></script>
    
<script type='text/javascript'>
	$(function(){
		$("#tree").dynatree({
			title: "Event samples",
			rootVisible: true,
//			persist: true,
			onQueryActivate: function(activate, dtnode) {
				logMsg("onQueryActivate(%o, %o)", activate, dtnode);
//				return false;
			},
			onActivate: function(dtnode) {
				logMsg("onActivate(%o)", dtnode);
				$("#echoActive").text(dtnode.data.title);
				if( dtnode.data.url )
					window.open(dtnode.data.url);
			},
			onDeactivate: function(dtnode) {
				logMsg("onDeactivate(%o)", dtnode);
				$("#echoActive").text("-");
			},
			
			onQuerySelect: function(select, dtnode) {
				logMsg("onQuerySelect(%o, %o)", select, dtnode);
				if( dtnode.isFolder )
					return false;
			},
			onSelect: function(select, dtnode) {
				logMsg("onSelect(%o, %o)", dtnode);
				var s = dtnode.tree.getSelectedNodes().join(", ");
				$("#echoSelected").text(s);
			},
			
			onQueryExpand: function(expand, dtnode) {
				logMsg("onQueryExpand(%o, %o)", expand, dtnode);
//				return false;
			},
			onExpand: function(dtnode) {
				logMsg("onExpand(%o)", dtnode);
			},
			onCollapse: function(dtnode) {
				logMsg("onCollapse(%o)", dtnode);
			},

			onLazyRead: function(dtnode) {
				logMsg("onLazyRead(%o)", dtnode);
			},

			onFocus: function(dtnode) {
				logMsg("onFocus(%o)", dtnode);
				$("#echoFocused").text(dtnode.data.title);
			},
			onBlur: function(dtnode) {
				logMsg("onBlur(%o)", dtnode);
				$("#echoFocused").text("-");
			},
			
			onClick: function(dtnode, event) {
				logMsg("onClick(%o, %o)", dtnode, event);
				if( event.shiftKey && dtnode.isLazy )
					alert("ctrl");
				//return false;
			},
			onDblClick: function(dtnode, event) {
				logMsg("onDblClick(%o, %o)", dtnode, event);
				dtnode.toggleSelect();
			},
			onKeydown: function(dtnode, event) {
				logMsg("onKeydown(%o, %o)", dtnode, event);
				switch( event.which ) {
				case 32: // [space]
					dtnode.toggleSelect();
					return false;
				}
			},
			onKeypress: function(dtnode, event) {
				logMsg("onKeypress(%o, %o)", dtnode, event);
			}
		});

	});
</script>
</head>

<body class="example">
	<h1>Example: Events</h1>
	<p class="description">
		Implements all callbacks.<br>
		Use the Firebug plugin in Firefox to see the event log.<br>
		The 'links' folders contain nodes with an custom data.url option. 
		This is used to open the URL in the onActivate event. <br>
		Note: the lazy reading is not implemented in this example.
	</p>

	<div id="tree">
		<ul>
			<li class="folder">jQuery links
				<ul>
					<li data="url: 'http://jquery.com'">jQuery home
					<li data="url: 'http://docs.jquery.com'">jQuery docs
				</ul>

			<li class="folder">Other links
				<ul>
					<li data="url: 'http://code.google.com'">Google Code
				</ul>

			<li class="folder">Lazy loading
				<ul>
					<li id="k123" class="lazy">This is a lazy loading document with key k123.
					<li id="k234" class="lazy folder">This is a lazy loading folder with key k234.
				</ul>
		</ul>
	</div>

	<div>Active node: <span id="echoActive">-</span></div>
	<div>Selected node list: <span id="echoSelected">-</span></div>
	<div>Focused node: <span id="echoFocused">-</span></div>

	<hr>
	<p class="sample-links">
		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
		&nbsp; <a class="hideOutsideFS" href="#">Link to this page</a>
		&nbsp; <a class="hideInsideFS" href="samples.html">Example Browser</a>
	 </p>
</body>
</html>
